<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>左侧导航</title>
  <!-- 使用Tailwind CSS替代内联CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 配置Tailwind主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            dark: {
              1: '#1D2129',
              2: '#4E5969',
              3: '#86909C',
            },
            light: {
              1: '#F2F3F5',
              2: '#F7F8FA',
              3: '#FFFFFF',
            }
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-shadow {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }
      .menu-active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .menu-hover {
        @apply hover:bg-primary/5 hover:text-primary transition-all duration-300;
      }
    }
  </style>
</head>
<body class="font-inter bg-light-3 text-dark-2 h-full m-0 p-0">
<div class="sidebar h-full flex flex-col sidebar-shadow">
  <div class="user-info p-5 border-b border-light-1">
    <div class="user-profile flex items-center">
      <div class="user-avatar w-10 h-10 rounded-full mr-3 overflow-hidden border-2 border-primary/20">
        <img src="/picture/user.jpg" alt="用户头像" class="w-full h-full object-cover">
      </div>
      <div>
        <div class="user-name font-medium text-dark-1">管理员</div>
      </div>
    </div>
  </div>

  <div class="menu flex-1 overflow-y-auto py-3">
    <div class="menu-title px-5 py-2 text-xs text-dark-3 uppercase tracking-wider">主导航</div>

    <a href="dashboard.html" class="menu-item flex items-center px-5 py-3 menu-active menu-hover" target="content" data-item="dashboard">
      <i class="fa fa-tachometer w-6 text-center mr-3"></i>
      <span>控制台</span>
      <a href="settings.html" class="menu-item flex items-center px-5 py-3 menu-hover" target="content" data-item="settings">
        <i class="fa fa-cog w-6 text-center mr-3"></i>
        <span>货物信息</span>
      </a>
    </a>
    <a href="/page/clent.html" class="menu-item flex items-center px-5 py-3 menu-active menu-hover" target="content" data-item="settings">
      <i class="fa fa-tachometer w-6 text-center mr-3"></i>
      <span>客户信息</span>
    </a>
    <a href="/page/cost.html" class="menu-item flex items-center px-5 py-3 menu-active menu-hover" target="content" data-item="settings">
      <i class="fa fa-tachometer w-6 text-center mr-3"></i>
      <span>费用信息</span>
    </a>


    <div class="menu-item has-submenu flex items-center px-5 py-3 menu-hover" id="inventoryMenu">
      <i class="fa fa-boxes w-6 text-center mr-3"></i>
      <span>库存管理</span>
      <i class="fa fa-chevron-down text-xs absolute right-5"></i>
    </div>

    <div class="submenu pl-5 hidden" id="inventorySubmenu">
      <a href="inventory.html" class="menu-item flex items-center px-5 py-2.5 text-sm menu-hover" target="content" data-item="inventory">
        <i class="fa fa-list w-6 text-center mr-3"></i>
        <span>库存查询</span>
      </a>
      <a href="inventory-add.html" class="menu-item flex items-center px-5 py-2.5 text-sm menu-hover" target="content" data-item="inventory-add">
        <i class="fa fa-plus-circle w-6 text-center mr-3"></i>
        <span>新增库存</span>
      </a>
    </div>

    <div class="menu-item has-submenu flex items-center px-5 py-3 menu-hover" id="inboundMenu">
      <i class="fa fa-sign-in w-6 text-center mr-3"></i>
      <span>入库管理</span>
      <i class="fa fa-chevron-down text-xs absolute right-5"></i>
    </div>

    <div class="submenu pl-5 hidden" id="inboundSubmenu">
      <a href="inbound.html" class="menu-item flex items-center px-5 py-2.5 text-sm menu-hover" target="content" data-item="inbound">
        <i class="fa fa-truck w-6 text-center mr-3"></i>
        <span>入库登记</span>
      </a>
      <a href="inbound-list.html" class="menu-item flex items-center px-5 py-2.5 text-sm menu-hover" target="content" data-item="inbound-list">
        <i class="fa fa-clipboard-list w-6 text-center mr-3"></i>
        <span>入库记录</span>
      </a>
    </div>

    <div class="menu-item has-submenu flex items-center px-5 py-3 menu-hover" id="outboundMenu">
      <i class="fa fa-sign-out w-6 text-center mr-3"></i>
      <span>出库管理</span>
      <i class="fa fa-chevron-down text-xs absolute right-5"></i>
    </div>

    <div class="submenu pl-5 hidden" id="outboundSubmenu">
      <a href="outbound.html" class="menu-item flex items-center px-5 py-2.5 text-sm menu-hover" target="content" data-item="outbound">
        <i class="fa fa-truck w-6 text-center mr-3"></i>
        <span>出库登记</span>
      </a>
      <a href="outbound-list.html" class="menu-item flex items-center px-5 py-2.5 text-sm menu-hover" target="content" data-item="outbound-list">
        <i class="fa fa-clipboard-list w-6 text-center mr-3"></i>
        <span>出库记录</span>
      </a>
    </div>

    <a href="reports.html" class="menu-item flex items-center px-5 py-3 menu-hover" target="content" data-item="reports">
      <i class="fa fa-chart-bar w-6 text-center mr-3"></i>
      <span>报表统计</span>
    </a>

    <a href="settings.html" class="menu-item flex items-center px-5 py-3 menu-hover" target="content" data-item="settings">
      <i class="fa fa-cog w-6 text-center mr-3"></i>
      <span>系统设置</span>
    </a>
  </div>
</div>

<script>
  // 优化的菜单交互逻辑
  document.addEventListener('DOMContentLoaded', function() {
    // 子菜单切换
    const menuItems = document.querySelectorAll('.has-submenu');
    menuItems.forEach(item => {
      item.addEventListener('click', function(e) {
        const submenuId = this.id.replace('Menu', 'Submenu');
        const submenu = document.getElementById(submenuId);

        // 使用requestAnimationFrame优化动画性能
        requestAnimationFrame(() => {
          submenu.classList.toggle('hidden');

          // 更新箭头方向
          const arrow = this.querySelector('.fa-chevron-down');
          if (submenu.classList.contains('hidden')) {
            arrow.style.transform = 'rotate(0deg)';
          } else {
            arrow.style.transform = 'rotate(180deg)';
          }
        });
      });
    });

    // 菜单项点击事件
    document.querySelectorAll('.menu-item[data-item]').forEach(item => {
      item.addEventListener('click', function() {
        // 使用requestIdleCallback处理非关键任务
        requestIdleCallback(() => {
          window.parent.postMessage({
            type: 'activateMenuItem',
            itemId: this.getAttribute('data-item')
          }, '*');
        });
      });
    });

    // 通知父窗口当前iframe高度
    const updateHeight = () => {
      const height = document.documentElement.scrollHeight;
      window.parent.postMessage({
        type: 'frameHeight',
        height: height
      }, '*');
    };

    // 初始调用
    updateHeight();

    // 窗口大小变化时更新高度
    window.addEventListener('resize', updateHeight);
  });

  // 监听来自父框架的消息
  window.addEventListener('message', function(event) {
    if (event.data.type === 'setActiveItem') {
      // 移除所有激活状态
      document.querySelectorAll('.menu-item').forEach(item => {
        item.classList.remove('menu-active');
      });

      // 设置当前激活项
      const activeItem = document.querySelector(`.menu-item[data-item="${event.data.itemId}"]`);
      if (activeItem) {
        activeItem.classList.add('menu-active');

        // 如果是在子菜单中，展开父菜单
        const parentMenu = activeItem.closest('.submenu');
        if (parentMenu) {
          parentMenu.classList.remove('hidden');

          // 更新箭头方向
          const parentMenuItem = document.getElementById(parentMenu.id.replace('Submenu', 'Menu'));
          if (parentMenuItem) {
            const arrow = parentMenuItem.querySelector('.fa-chevron-down');
            arrow.style.transform = 'rotate(180deg)';
          }
        }
      }
    }
  });
</script>
</body>
</html>